html {font:14px/24px arial;}
html, body {height:100%;color:#fff; overflow: hidden}
body, p {padding:0;margin:0;}
body {background-color:#308ec9;perspective:1000px;}
#callNumber{
    color: rgb(220,223,227);
    font-size:2.5rem;
    line-height:75px;
    display:inline-block;
    width:285px;
    height:75px;
    text-align:center;
    border:solid 1px rgba(255, 255, 255, 0.4);
    background:rgba(255, 255, 255, 0.2);
    border-radius:5px;
    margin:15px;
    position:relative;
    transition:all .2s;
    vertical-align:top;
    caret-color:#FFFF37;
}
#callNumber:hover {transform:scale(1.02);border-color:#FFFF37;background:rgba(255, 255, 255, 0.4);}
.keyboard {
    width:285px;
    padding:5px;
    background:rgba(255, 255, 255, 0.2);
    border:solid 1px rgba(255, 255, 255, 0.2);
    border-radius:5px;
    position:absolute;
    top:380px;
    left:50%;
    transform:translate(-50%,-50%) rotateX(0);
    transform-style:preserve-3d;
    transition:all .4s;
}

.dial {
    top:340px;
}

.keyboard ul {display:block;font-size:0;line-height:0;padding:5px 0;}
.keyboard li {
    font-size:2.5rem;
    line-height:65px;
    display:inline-block;
    width:75px;
    height:65px;
    text-align:center;
    border:solid 1px rgba(255, 255, 255, 0.4);
    background:rgba(255, 255, 255, 0.2);
    border-radius:5px;
    margin:0 5px;
    position:relative;
    transition:all .2s;
    vertical-align:top;
}
.keyboard li:after {height:100%;width:100%;background:rgba(255, 255, 255, 0.2);transform:scale(1.2);content:'';border-radius:5px;display:block;position:absolute;top:0;left:0;}
.keyboard li:hover {transform:scale(.9);border-color:#fff;background:rgba(255, 255, 255, 0.4);cursor: pointer;}

.keyboard ul:nth-child(1) {margin-top:5px;padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(1) li:nth-child(2) {left:6px;}
.keyboard ul:nth-child(1) li:nth-child(3) {left:13px;}

.keyboard ul:nth-child(2) {padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(2) li:nth-child(2) {left:6px;}
.keyboard ul:nth-child(2) li:nth-child(3) {left:13px;}

.keyboard ul:nth-child(3) {padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(3) li:nth-child(2) {left:6px;}
.keyboard ul:nth-child(3) li:nth-child(3) {left:13px;}

.keyboard ul:nth-child(4) {padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(4) li:nth-child(2) {left:6px;}
.keyboard ul:nth-child(4) li:nth-child(3) {left:13px;}

.keyboard ul:nth-child(5) {padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(5) li:nth-child(1) {width:152px;}
.keyboard ul:nth-child(5) li:nth-child(1):after {transform:scale(1.09, 1.2);}
.keyboard ul:nth-child(5) li:last-child {width:103px;}
.keyboard ul:nth-child(5) li:last-child:after {transform:scale(1.07, 1.2);}

.keyboard ul:nth-child(6) {padding-bottom:15px; margin-left:5px;}
.keyboard ul:nth-child(6) li:nth-child(1) {width:152px;}
.keyboard ul:nth-child(6) li:nth-child(1):after {transform:scale(1.09, 1.2);}
.keyboard ul:nth-child(6) li:last-child {width:103px;}
.keyboard ul:nth-child(6) li:last-child:after {transform:scale(1.07, 1.2);}